<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    /* relative经典应用，微调 */
  .icon {
    position: relative;
    top: -5px;  /* 向上移动5px */
    left: 10px; /* 向右移动10px */
  }


  .menu {
    position: relative;
     /* 定位基准，自身原始位置，有啥意义 ，哪里看的出来*/
    width: 200px;
  }
  .dropdown {
    position: absolute;
    /* 定位最近祖元素，到底在定位什么 */
    /* 脱离正常文档流，看不出来哈 */
    top: 100%;  
    /* 紧贴父元素底部 */
    left: 0;
    /* 左边缘和父元素对齐 */
    width: 100%;
    display: none;
  }
  .menu:hover .dropdown {
    display: block;
  }

  .footer {
    position: fixed;
    /* 拉条的时候这个内容不会动 */
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: #333;
    color: white;
    
  }

  .sticky-header {
    position: sticky;
    top: 0;  /* 触发阈值 */
    background: white;
    z-index: 10;
    /* 喵，就是，往下拉，他会折叠一部分文字，标题不懂，接着拉就跟正常的没区别了 */
  }

  .overlay {
    position: fixed;
    z-index: 100;
    background: rgba(0,0,0,0.5);
  }
  /* 看不出来区别 */
  .modal {
    position: fixed;
    z-index: 200;
  }

</style>
</head>
<body>
<div class="content">
  <h2 class="sticky-header">章节标题</h2>
  <p>内容段落...不必说碧绿的菜畦，光滑的石井栏，高大的皂荚树，紫红的桑椹;也不必说鸣蝉在树叶里长吟
    ，肥胖的黄蜂伏在菜花上，轻捷的叫天子(云雀)忽然从草间直窜向云霄里去了。单是周围的短短的泥墙根一带，
    就有无限趣味。油蛉在这里低唱，蟋蟀们在这里弹琴。翻开断砖来，有时会遇见蜈蚣;还有斑蝥，倘若用手指
    按住它的脊梁，便会拍的一声，从后窍喷出一阵烟雾。何首乌藤和木莲藤缠络着，木莲有莲房一般的果实
    ，何首乌有拥肿的根。有人说，何首乌根是有象人形的，吃了便可以成仙，我于是常常拔它起来，牵连不断地拔起来，
    也曾因此弄坏了泥墙，却从来没有见过有一块根象人样。如果不怕刺，还可以摘到覆盆子，
    象小珊瑚珠攒成的小球，又酸又甜，色味都比桑椹要好得远。</p>
</div>

<div class="overlay"></div>  
<!-- 半透明遮罩 -->
<div class="modal">弹窗内容</div>

    <div class="menu">
  主菜单
  <div class="dropdown">
    <div>选项1</div>
    <div>选项2</div>
  </div>
</div>

<span>文本内容</span>
<img src="D:\OneDrive\Desktop\黄土地.jpg" class="icon" alt="图标">

<div class="footer">版权所有 zq</div>


</body>
</html>